<!-- 物流收货管理 -->
<template>
  <div>
    <CommonSearch @search="query" @reset="reset">
      <el-col :span="8">
        <el-form-item label="快递公司">
          <el-input
            v-model="queryParams.condition.title"
            clearable
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="物流单号">
          <el-input
            v-model="queryParams.condition.title"
            clearable
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="queryParams.condition.searchTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%; height: 33px"
            @change="(date) => timeChange(date, queryParams.condition)"
            clearable
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="状态">
          <DictSelect
            v-model="queryParams.condition.publishStatus"
            :defaultOptions="options.shipmentStatus"
            placeholder="请选择状态"
            clearable
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </CommonSearch>

    <el-row class="cardMiniBar">
      <el-col :span="24">
        <div class="fr">
          <el-button type="primary" @click="add" size="small">创建收货单</el-button>
          <el-button type="primary" @click="batchSynchronizeWaybills" size="small">批量同步运单</el-button>
          <el-button type="primary" @click="batchConfirmShipment" size="small">批量确认收货</el-button>
        </div>
      </el-col>
    </el-row>

    <div class="cardBody">
      <edu-table
        ref="mainTable"
        :data="tableList"
        :pageSize="queryParams.pageSize"
        :pageNum="queryParams.pageNum"
        :total="queryParams.total"
        @page-change="handleCurrentChange"
        :order="true"
        :selection="true"
      >
        <el-table-column label="订单号" prop="name" />
        <el-table-column label="物流单号" prop="name" width="110" />
        <el-table-column label="快递公司" prop="name" width="110"/>
        <el-table-column label="发件人" prop="name" />
        <el-table-column label="发件地址" prop="name" width="110"/>
        <el-table-column label="收件人" prop="name" />
        <el-table-column label="收件地址" prop="name" width="110"/>
        <el-table-column label="状态" prop="publishStatus">
          <template slot-scope="scope">
            {{ renderOption(scope.row.publishStatus, "publishStatus") }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="publishTime" width="160" />

        <el-table-column label="操作" fixed="right" width="180px">
          <template slot-scope="scope">
            <el-button
              type="text"
              v-if="scope.row.publishStatus == 2"
              @click="synchronizeWaybills(scope.row)"
              size="small"
            >
              同步运单
            </el-button>
            <el-button
              type="text"
              v-if="scope.row.publishStatus == 2"
              @click="batchConfirmShipment(scope.row)"
              size="small"
            >
            确认收货
            </el-button>
          </template>
        </el-table-column>
      </edu-table>
    </div>

    <edu-dialog
      :title.sync="dialogConfig.title"
      :visible.sync="dialogConfig.showDialog"
      @close="handleDialogClose"
      width="70%"
    >
      <el-form
        ref="dialogForm"
        :model="dialogConfig.formData"
        :rules="dialogConfig.action === 'view' ? {} : dialogConfig.rules"
        label-width="100px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="发件人" prop="name">
              <el-input v-model="dialogConfig.formData.name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发件地址" prop="name">
              <el-input v-model="dialogConfig.formData.name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收件人" prop="name">
              <el-input v-model="dialogConfig.formData.name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收件地址" prop="name">
              <el-input v-model="dialogConfig.formData.name" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="快递公司" prop="name">
              <el-input v-model="dialogConfig.formData.name" clearable />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="buttons" v-if="dialogConfig.action !== 'view'">
        <template>
          <el-button @click="closeDialog(dialogConfig)"> 取消 </el-button>
          <el-button type="primary" @click="handlerSubmit"> 提交 </el-button>
        </template>
      </span>
      <span slot="buttons" v-else>
        <template>
          <el-button @click="closeDialog(dialogConfig)">返回</el-button>
        </template>
      </span>
    </edu-dialog>
  </div>
</template>

<script>
import utils from "@/utils";
import mixins from "@/mixins";

import {
  addKnowledgeExpert,
  deleteKnowledgeExpert,
  pageKnowledgeExpert,
  publishKnowledgeExpert,
  recommendKnowledgeExpert,
  unPublishKnowledgeExpert,
  unrecommendKnowledgeExpert,
  updateKnowledgeExpert,
} from "@/api/knowledge";

const formData = {
  name: "",
  levelCode: "",
  description: "",
  organization: "",
  image: "",
  fieldCode: "",
};
export default {
  mixins: [mixins],
  data() {
    return {
      queryParams: {
        condition: {},
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      tableList: [],
      dialogConfig: {
        title: "",
        showDialog: false,
        action: "add",
        formData: {},
        rules: {
          name:[
            {
              required: true,
              validator: this.checkName,
              trigger: 'blur',
            }
          ],
        },
      },
      options: {
        fieldCode: [],
      },
    };
  },
  created() {
    this.initOptions(
    );
  },
  methods: {
    async initOptions() {
      this.query()
    },
    // 查询
    async query() {
      let { returnObj } = await pageKnowledgeExpert(this.queryParams);
      this.tableList = returnObj.list;
      this.queryParams.total = returnObj.total;
      this.queryParams.pageSize = returnObj.pageSize;
    },
    // 重置
    reset() {
      for (var key in this.queryParams.condition) {
        this.queryParams.condition[key] = "";
      }
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 10;

      this.query();
    },
    // 分页
    handleCurrentChange(row) {
      this.queryParams.pageSize = row.pageSize;
      this.queryParams.pageNum = row.pageNum;

      this.query();
    },
    closeDialog(dialog) {
      dialog.showDialog = false;
      this.$refs["dialogForm"].resetFields();
    },
    openDialog(dialog) {
      dialog.showDialog = true;
    },
    // 新增
    add() {
      this.dialogConfig.title = "新增";
      this.dialogConfig.action = "add";
      this.dialogConfig.formData = utils.clone(formData);

      this.openDialog(this.dialogConfig);
    },
    checkName(rule, value, callback) {
        if (!value) {
            callback(new Error("此项必填！"))
        } else if (value.length>50) {
            callback(new Error("超出字数限制100"))
        } else {
            callback()
        }
    },
    // 修改
    async edit(row) {
      this.dialogConfig.title = "编辑";
      this.dialogConfig.action = "edit";

      this.dialogConfig.formData = utils.clone(row);

      this.openDialog(this.dialogConfig);
    },
    // 保存提交
    handlerSubmit() {
      let params = {
        ...this.dialogConfig.formData,
      };
      this.$refs["dialogForm"].validate((valid) => {
        if (valid) {
          if (this.dialogConfig.action == "add") {
            addKnowledgeExpert(params).then((res) => {
              this.$message({
                type: "success",
                message: "成功",
              });
              this.closeDialog(this.dialogConfig);
              this.query();
            });
          } else {
            updateKnowledgeExpert(params).then((res) => {
              this.$message({
                type: "success",
                message: "成功",
              });
              this.closeDialog(this.dialogConfig);
              this.query();
            });
          }
        }
      });
    },
    // 查看
    view() {
      this.dialogConfig.title = "查看";
      this.dialogConfig.action = "view";
      this.openDialog(this.dialogConfig);
    },
    // 关闭弹框
    handleDialogClose() {
      this.closeDialog(this.dialogConfig);
    },
    // 同步运单
    async synchronizeWaybills(){
      this.$confirm(`确认同步运单吗?`).then(() => {
        // publishKnowledgeExpert([row.id]).then((res) => {
        //   this.$message({
        //     type: "success",
        //     message: "成功",
        //   });
        //   this.query();
        // });
      });
    },
    // 批量同步运单
    async batchSynchronizeWaybills() {
      let list = this.$refs.mainTable.getCheckData().map((item) => {
        return item.id;
      });

      if (!list || list.length == 0) {
        this.$message({
            type: "warning",
            message: "请勾选数据",
          });
          return;
      }
      this.$confirm(`确认批量同步运单?`).then(() => {
        // publishKnowledgeExpert(list).then((res) => {
        //   this.$message({
        //     type: "success",
        //     message: "批量同步运单成功",
        //   });
        //   this.query();
        // });
      });
    },
    // 确认发货
    async confirmShipment(row) {
      this.$confirm(`确认发货?`).then(() => {
        // recommendKnowledgeExpert([row.id]).then((res) => {
        //   this.$message({
        //     type: "success",
        //     message: "成功",
        //   });
        //   this.query();
        // });
      });
    },
    // 取消确认发货
    async revokeConfirmShipment(row) {
      // unrecommendKnowledgeExpert([row.id]).then((res) => {
      //   this.$message({
      //     type: "success",
      //     message: "成功",
      //   });
      //   this.query();
      // });
    },
    // 批量确认发货
    async batchConfirmShipment() {
      let list = this.$refs.mainTable.getCheckData().map((item) => {
        return item.id;
      });

      if (!list || list.length == 0) {
        this.$message({
            type: "warning",
            message: "请勾选数据",
          });
          return;
      }
      this.$confirm(`确认批量确认发货?`).then(() => {
        // recommendKnowledgeExpert(list).then((res) => {
        //   this.$message({
        //     type: "success",
        //     message: "批量确认发货成功",
        //   });
        //   this.query();
        // });
      });
    },
    // 批量取消确认发货
    async revokeBatchConfirmShipment() {
      let list = this.$refs.mainTable.getCheckData().map((item) => {
        return item.id;
      });

      if (!list || list.length == 0) {
        this.$message({
            type: "warning",
            message: "请勾选数据",
          });
          return;
      }
      this.$confirm(`确认批量取消确认发货?`).then(() => {
        // unrecommendKnowledgeExpert(list).then((res) => {
        //   this.$message({
        //     type: "success",
        //     message: "批量取消确认发货成功",
        //   });
        //   this.query();
        // });
      });
    },
    // 删除
    async handlerDelete(row) {
      let idField = "id"
      if(row && row[idField]){
        this.batchDelete(deleteKnowledgeExpert,idField,[row[idField]])
      }else{
        this.batchDelete(deleteKnowledgeExpert,idField)
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
